<style>
    #add {
        padding: 20px 25px 25px 0;
    }

    #add .layui-treeSelect .ztree li a, .ztree li span {
        margin: 0 0 2px 3px !important;
    }
</style>
<div class="layui-fluid" id="activityUpdate">
    <form class="layui-form" action="" lay-filter="activity-update-form" enctype="multipart/form-data" id="activity-update-form">
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">活动名称</label>
            <div class="layui-input-block">
                <input type="text" autocomplete="off" name="name" lay-verify="required" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label febs-form-item-require">实验ID</label>
            <div class="layui-input-block">
                <input type="text" name="tActivityId"  class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">

            <div class="layui-form-item">
                <label class="layui-form-label">活动头图</label>
                <img alt="头像" id="headPhoto" style="width: 200px;height: 160px" title="" data-th-src="@{${activity.headPhoto}}">
                <div class="layui-input-block" style="margin-top: 5px">
                    <button type="button" class="layui-btn" id="upload_headPhoto">
                        <i class="layui-icon">&#xe67c;</i>修改活动头图
                    </button>
                    <div id="result_headPhoto"></div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">限额人数：</label>
            <div class="layui-input-block">
                <input type="text" name="limitNumber" autocomplete="off" lay-verify="required|number" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">活动价格：</label>
            <div class="layui-input-block">
                <input type="text" name="price" autocomplete="off" lay-verify="required|number" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">活动位置：</label>
            <div class="layui-input-block">
                <input type="text" name="position" autocomplete="off" lay-verify="required" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">结束时间：</label>
            <div class="layui-input-block">
                <input type="text" name="endTime" placeholder="请选择结束时间" id="endTime" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">分销百分比：</label>
            <div class="layui-input-block">
                <input type="text" name="distribution" autocomplete="off" lay-verify="required" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">客服手机号：</label>
            <div class="layui-input-block">
                <input type="text" name="serviceTel" autocomplete="off" lay-verify="required|phone" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">客服微信二维码</label>
            <img alt="二维码" id="wechatPhoto" style="width: 200px;height: 160px" title="" data-th-src="@{${activity.servicePhoto}}">
            <div class="layui-input-block" style="margin-top: 5px">
                <button type="button" class="layui-btn" id="upload_wechat">
                    <i class="layui-icon">&#xe67c;</i>修改客服微信二维码
                </button>
                <div id="result_wechat"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">背景音频</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="upload_videoUrl">
                    <i class="layui-icon">&#xe67c;</i>上传背景音频
                </button>
                <div id="result_videoUrl"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">活动内容</label>
            <div class="layui-input-block">
                <input type="hidden" name="remark" id="remark">
                <div id="editor"></div>
            </div>
        </div>


        <div class="layui-form-item febs-hide">
            <button class="layui-btn" lay-submit="" lay-filter="activityUpdate-form-submit" id="submit"></button>
            <button type="reset" class="layui-btn" id="reset"></button>
            <input type="hidden" name="test">
        </div>
    </form>
</div>
<script data-th-inline="javascript">
    layui.use(['febs', 'form', 'layedit', 'validate', 'upload'], function () {
        var $ = layui.$,
            febs = layui.febs,
            layer = layui.layer,
            form = layui.form,
            $view = $('#activityUpdate'),
            activity = [[${activity}]],
            laydate = layui.laydate,
            layedit = layui.layedit,
            upload = layui.upload,
            validate = layui.validate;

        form.verify(validate);
        form.render();

        var E = window.wangEditor;
        var editor = new E('#editor');
        // 或者 var editor = new E( document.getElementById('editor') )

        // 关闭粘贴内容中的样式
        editor.config.pasteFilterStyle = false;
        // // 忽略粘贴内容中的图片
        // editor.customConfig.pasteIgnoreImg = true;
        //开启debug模式
        editor.config.debug = true;
        // 配置服务器端地址
        editor.config.uploadImgServer = ctx + 'activity/uploadActivityPic';
        //自定义 fileName
        editor.config.uploadFileName = 'file';

        // 自定义菜单配置
        editor.config.menus = [
            'bold',  // 粗体
            'fontSize',  // 字号
            'fontName',  // 字体
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            'backColor',  // 背景颜色
            'link',  // 插入链接
            'list',  // 列表
            'justify',  // 对齐方式
            'quote',  // 引用
            'emoticon',  // 表情
            'image',  // 插入图片
            'table',  // 表格
            'undo',  // 撤销
            'redo'  // 重复
        ]

        editor.create();

        editor.txt.html(activity.content);

        // $("#experiment_table").attr("ts-selected", project.courseId);

        // laydate.render({
        //     elem: '#startTime' //指定元素
        //     ,calendar: true
        //     ,type: 'datetime'
        //     ,format:'yyyy-MM-dd HH:mm:ss'
        //     ,value:activity.startTime
        // });

        laydate.render({
            elem: '#endTime' //指定元素
            ,calendar: true
            ,type: 'datetime'
            ,format:'yyyy-MM-dd HH:mm:ss'
            ,value:activity.endTime
        });

        //获取活动头图名称
        if (activity.headPhoto != null) {
            var ss = activity.headPhoto.split('/');
            var dd = ss[ss.length - 1];
            $("#result_headPhoto").html(dd);
        }
        //获取微信图片名称
        if (activity.servicePhoto != null) {
            var ss = activity.servicePhoto.split('/');
            var dd = ss[ss.length - 1];
            $("#upload_wechat").html(dd);
        }

        //获取音频视频名称
        if (activity.videoUrl != null) {
            var ss = activity.videoUrl.split('/');
            var dd = ss[ss.length - 1];
            $("#upload_videoUrl").html(dd);
        }

        initUserValue();

        function initUserValue() {
            form.val("activity-update-form", {
                "tActivityId":activity.tactivityId,
                "name": activity.name,
                "endTime":activity.endTime,
                "startTime":activity.startTime,
                "limitNumber":activity.limitNumber,
                "videoUrl": activity.videoUrl,
                "position": activity.position,
                "serviceTel": activity.serviceTel,
                "price": activity.price,
                "distribution": activity.distribution,
            });
        }

        //拖拽上传代码
        upload.render({
            elem: '#test10',
            // url: ctx + 'scan/face/register', //改成您自己的上传接口
            accept: "images",
            acceptMime: 'image/*',//打开文件选择框时,只显示图片文件
            field: 'image',
            auto: false,  //是否选完文件后自动上传。默认值：true
            // bindAction: '#sub',
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    layui.$('#uploadDemoView').find('img').attr('src', result);
                })
            },
            done: function (res) {
                layer.msg('上传成功');
            }
        });



        upload.render({
            elem: '#upload_headPhoto', //绑定元素
            accept: "images",
            field: "headPhoto_file",
            acceptMime: 'image/*',//打开文件选择框时,只显示图片文件
            auto: false,  //是否选完文件后自动上传。默认值：true
            // bindAction: '#btnSub',
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    // $('#headImage').attr('src', result);

                    $("#headPhoto").attr("src",result);
                    $("#result_headPhoto").html(file.name);
                })
            }
        });


        upload.render({
            elem: '#upload_videoUrl', //绑定元素
            accept: "audio",
            field: "videoUrl_file",
            acceptMime: 'audio/*',//打开文件选择框时,只显示图片文件
            auto: false,  //是否选完文件后自动上传。默认值：true
            // bindAction: '#btnSub',
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    $("#upload_videoUrl").html(file.name);

                })
            }
        });

        upload.render({
            elem: '#upload_wechat', //绑定元素
            accept: "images",
            field: "wechat_file",
            acceptMime: 'image/*',//打开文件选择框时,只显示图片文件
            auto: false,  //是否选完文件后自动上传。默认值：true
            // bindAction: '#btnSub',
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    $("#wechatPhoto").attr("src",result);
                    $("#upload_wechat").html(file.name);
                })
            }
        });

        form.on('submit(activityUpdate-form-submit)', function (data) {
            var formData = new FormData(document.getElementById("activity-update-form"));

            data.field.content = editor.txt.html();
            formData.append("content",data.field.content);

            $.ajax({
                url: ctx + 'activity/updateActivity',
                data: formData,
                type: 'post',
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (data) {
                    if (data.code == 200) {
                        layer.msg('操作成功', {
                            icon: 6,
                            time: 1000
                        }, function () {
                            layer.closeAll();
                            $('#activity').find('#reset').click();
                        });
                    } else {
                        layer.msg('请检查参数', {
                            icon: 5,
                            time: 1000
                        });
                    }
                },
                error: function (data) {
                    layer.msg('操作成功', {
                        icon: 5,
                        time: 1000
                    });
                }
            });
            return false;
        });
    });
</script>